<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="宿舍名称" prop="dormitoryName">
        <el-input
          v-model="queryParams.dormitoryName"
          placeholder="请输入宿舍名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="楼栋名称" prop="buildingName">
        <el-input
          v-model="queryParams.buildingName"
          placeholder="请输入楼栋名称"
          clearable
        />
      </el-form-item>
<!--      <el-form-item label="设备类型" prop="typeName">
        <el-select v-model="queryParams.typeName" placeholder="请选择类型">
          <el-option label="水表" value="水表" />
          <el-option label="电表" value="电表" />
        </el-select>
      </el-form-item>-->
      <el-form-item label="结算月份" prop="settlementTime">
        <el-date-picker
          v-model="queryParams.settlementTime"
          type="month"
          value-format="yyyy-MM"
          placeholder="选择月份"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >查询</el-button
        >
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="readingList"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column label="宿舍名称" prop="dormitoryName" align="center" />
      <el-table-column label="电表月初读数" align="center">
        <template slot-scope="{ row }">
          {{ da(row.readingSettlementHistoryList[0], "beginData") }}
        </template>
      </el-table-column>
      <el-table-column label="电表月末读数" align="center">
        <template slot-scope="{ row }">
          {{ da(row.readingSettlementHistoryList[0], "endData") }}
        </template>
      </el-table-column>
      <el-table-column label="水表月初读数" align="center">
        <template slot-scope="{ row }">
          {{da(row.readingSettlementHistoryList[1], "beginData")}}
        </template>
      </el-table-column>
      <el-table-column label="水表月末读数" align="center">
        <template slot-scope="{ row }">
          {{da(row.readingSettlementHistoryList[1], "endData")}}
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listReading } from "@/api/system/reading";

export default {
  name: "ReadingSettlement",
  data() {
    return {
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dormitoryName: null,
        buildingName: null,
        typeName: null,
        settlementTime: null
      },
      readingList: [{
        "createBy": null,
        "createTime": null,
        "updateBy": null,
        "updateTime": null,
        "remark": null,
        "dormitoryName": "17",
        "readingSettlementHistoryList": [
          {
            "typeName": "水表",
            "beginData": 100.00,
            "endData": null
          },
          {
            "typeName": "电表",
            "beginData": 54.00,
            "endData": null
          }
        ]
      }],

      total: 0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      listReading(this.queryParams).then(response => {
        this.readingList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        dormitoryName: null,
        buildingName: null,
        typeName: null,
        settlementTime: null
      };
      this.getList();
    },
    da(data, type) {
      if(data!=undefined){
        if(type=="beginData"){
          if (data.beginData != null) {
            return data.beginData
          } else {
            return ""
          }
        }else if(type=="endData"){
          if (data.endData != null) {
            return data.endData
          } else {
            return "未到月末，暂无数据"
          }
        }
      }
      else {return "暂无配套设备"}
    }
  }

};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.el-date-picker {
  width: 200px;
}
</style>
